<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.jimet.server.*"%>
<div class="modal-dialog" style="width:700px;">
    <div class="modal-content" style="margin-top:85px;">
      <div class="modal-header" style="background-color:#f1f1f1;">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel" style="text-align:center;">Hemen Reacol'a üye olun ve eğlenmeye başlayın</h4>
      </div>
      <div class="modal-body">
       		<div style="width:100%;height:200px;margin-top:10px;">
       			<div style="width:50%;float:left;height:200px;border-right: 1px solid #ddd;">
       				<div style="width:300px;height:50px;margin-top:73px;">
       					<button type="button" class="btn btn-primary btn-lg btn-block" style="text-align:left;padding-left:14px;"><i class="fa fa-facebook" style="font-size:22px;"></i> &nbsp Facebook ile bağlan</button>
       				</div>
       			</div>
       			<div style="width:49%;float:left;height:200px">
       				<div style="width:300px;height:50px;margin-left:20px;margin-top:20px;">
       					<input type="text" class="form-control" id="name" placeholder="Tam Adınız">
       					<input type="email" class="form-control" id="mail" placeholder="Epostanız" style="margin-top:10px;">
       					<input type="password" class="form-control" id="password" placeholder="Şifreniz" style="margin-top:10px;">
       					<p style="margin-top:10px;font-size:12px;">Kayıt olarak <font style="color:#4985b8"> Kullanım şartları</font>nı   ve <font style="color:#4985b8">Gizlilik politikası</font>nıda kabul etmiş olursunuz</p>
       					<div id="error-div" style="width:100%;height:30px;background-color:#E08181;line-height:30px;padding-left:5px;color:#fff;display:none;"> <i class="fa fa-times"></i> Bu email ile kayıtlı kullanıcı bulunmaktadır</div>
       				</div>
       			</div>
       		</div>
      </div>
      <div class="modal-footer">
      <div style="width:50%;display:table;float:left;text-align:left;">Bir hesabınız var mı?&nbsp
      <button type="button" class="btn btn-primary">Giriş Yap</button>
      </div>
      <div style="width:50%;display:table;float:left;">
      	<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
        <button id="sign-btn" type="button" class="btn btn-success" data-loading-text="İşleminiz yapılıyor..." onclick="signForm()">Kaydol</button>
      </div>
      </div>
    </div>
  </div>
  
  <script>
  function IsEmail(email) {
	  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	  return regex.test(email);
	}

function signForm()
{
	
	var name = $("#name").val();
	var mail = $("#mail").val();
	var password = $("#password").val();
	
	
	
	if(name == "")
	{
		$("#name").css("border-color", "red");	
	}
	if(mail == "" || !IsEmail(mail))
	{
		$("#mail").css("border-color", "red");	
	}
	if(password == "")
	{
		$("#password").css("border-color", "red");	
	}
	if(name.length<6)
	{
		$("#name").css("border-color", "red");	
	}
	if(password.length<6)
	{
		$("#password").css("border-color", "red");	
	}
	else
		{
		$("#sign-btn").button('loading')
		$.ajax({ 
			  type: "POST",
			  url: "<%=JimetConfiguration.getString("APPLICATION.URL")%>process/signUpProcess.jsp",
			  data: { name : name , mail:mail , password:password }
			})
			  .done(function( msg ) {
				  if(msg == 0)
					$("#error-div").show();
				  else	  
					window.location.href = "<%=JimetConfiguration.getString("APPLICATION.URL")%>step";
			   	
			  });
		$("#sign-btn").button('reset')
		
		}
	
}
$( "#name" ).keyup(function() {
	$("#name").css("border-color", "");	
});
$( "#mail" ).keyup(function() {
	$("#mail").css("border-color", "");	
	$("#error-div").hide();
});
$( "#password" ).keyup(function() {
		$("#password").css("border-color", "");		
});
  </script>
  